<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鲜花</title>
    <link rel="stylesheet" href="css/css.css">
    <style>
        .head{
            width: 100%;
            height: 60px;
            /* background-color: pink; */
        }
        .head-c{
            width: 1440px;
            height: 60px;
            margin: 0 auto;
            /* background-color: powderblue; */
        }
        .head .head-c .logo{
            float: left;
            padding: 15px 0 0 50px; 
        }
        .head .head-c .nav{
            float: right;
            /* background-color: aqua */
        }
        .head .head-c .nav .nav-icon{
            float: left;
            height: 60px;
            line-height: 60px;
            text-transform: uppercase;
            padding: 0 39px;
        }
        .head .head-c .nav .nav-icon a{
            color: #161616;
        }
        .head .head-c .nav .nav-icon .line{
            display: block;
            width: 40px;
            height: 2px;
            background-color: #161616;
            margin: 0 auto;
            margin-top: -15px;
            opacity: 0;
        }
        .head .head-c .nav .nav-icon:hover .line{
            opacity: 1;
        }
        /* banner */
        .banner{
            position: relative;
            width: 100%;
            height: 800px;
            background: url(img/banner2.png) no-repeat center;
            background-size: cover;
        }
        .banner .dian{
            position: absolute;
            bottom: 40px;
            left: 50%;
            margin-left: -160px;
        }
        .banner .dian span{
            float: left;
            width: 20px;
            height: 20px;
            margin: 0 30px;
            background-color: #fff;
            border-radius: 50px;
        }
        .banner .dian span:hover{
            background-color: #929292;
        }
        /* body */
        .body{
            width: 100%;
            height: 1204px;
            /* background-color: rgb(47, 161, 255); */
        }
        .body .body-c{
            width: 1440px;
            height: 100%;
            /* background-color: pink; */
            margin: 0 auto;
        }
        .body .body-c .list{
            overflow: hidden;
            padding: 60px 0 150px ;
        }
        .body .body-c .list .item{
            float: right;
            width: 464px;
            height: 270px;
            margin-left: 24px;
            position: relative;
        }
        .body .body-c .list .mr0{
            margin-left: 0;
        }
        .body .body-c .list .item .bg{
            width: 464px;
            height: 270px;
        }
        .body .body-c .list .item .info{
            position: absolute;
            left: 40px;
            top: 82px;
        }
        .body .body-c .list .item .info1{
            font-size: 22px;
            letter-spacing: -0.53px;
            font-weight: bold;
            padding-bottom: 20px;
            line-height: 30px;
        }
        .body .body-c .list .item .info2{
            font-size: 13px;
            color: #373737;
            letter-spacing: -0.31px;
            line-height: 18px;
        }
        /* 中间导航 */
        .body .body-c .nav{
            overflow: hidden;
            width: fit-content;
            margin: 0 auto;
        }
        .body .body-c .nav .nav-item{
            float: left;
            font-size: 18px;
            letter-spacing: -0.43px;
            line-height: 25px;
            margin: 0 40px;
            text-transform: uppercase;
        }
        .body .body-c .nav .nav-item a{
            color: #161616;
        }
        .body .body-c .nav .nav-item .line{
            display: block;
            height: 2px;
            width: 30px;
            background-color: #161616;
            margin: 6px auto 0;
            opacity: 0;
        }
        .body .body-c .nav .nav-item:hover .line{
            opacity: 1;
        }
        /* ///下面 */
        .body .pro-list{
            margin-top: 52px;
            overflow: hidden;
        }
        .body .pro-list .pro-item{
            float: left;
            margin-right: 60px;
        }
        .body .pro-list .mr0{
            margin-right: 0;
        }
        .body .pro-list .pro-item .text{
            overflow: hidden;
        }
        .body .pro-list .pro-item .text .title{
            height: 28px;
            font-size: 20px;
            letter-spacing: -0.48px;
            margin-top: 15px;
            float: left;
            font-weight: bold;
        }
        .body .pro-list .pro-item .text .price{
            float: right;
            margin-top: 19px;
            height: 22px;
            font-size: 16px;
            letter-spacing: -0.38px;
        }
        .body .pro-list .pro-item .desc{
            height: 22px;
            letter-spacing: -0.38px;
            color: #929292;
            margin-top: 4px;
        }
        .abt{
            width: 100%;
            height: 360px;
            background: url(img/abt.png) no-repeat center;
        }.abt .abt-c{
            position: relative;
            width: 1440px;
            height: 100%;
            margin: 0 auto;
            /* background-color: pink; */
        }
        .abt .abt-c .info{
            position: absolute;
            left: 100px;
            top: 74px;
        }
        .abt .abt-c .info .icon{
            height: 33px;
            font-size: 24px;
            letter-spacing: -0.58px;
            font-weight: bold;
        }
        .abt .abt-c .info .title{
            height: 80px;
            font-size: 14px;
            color: #505050;
            letter-spacing: -0.34px;
            margin: 20px 0 40px;
        }
        .abt .abt-c .info .text{
            height: 40px;
            width: 120px;
            background-color: #161616;
            font-size: 14px;
            color: #ffffff;
            letter-spacing: -0.34px;
            text-align: center;
            line-height: 40px;
        }
        /* /////////// */
        .top{
            width: 100%;
            height: 774px;
        }
        .top .top-c{
            width: 1440px;
            height: 100%;
            margin: 0 auto;
            /* background-color: pink; */
        }
        .top .top-c .icon{
            overflow: hidden;
            padding-top: 150px;
            /* background-color: powderblue; */
        }
        .top .top-c .icon .title{
            position: relative;
            float: left;
            width: 450px;
            height: 450px;
            margin-right: 45px;
        }
        .top .top-c .icon .mr0{
            margin-right: 0;
        }
        .top .top-c .icon .title img{
            display: block;
            width: 450px;
            height: 450px;
        }
        .top .top-c .icon .title .text{
            position: absolute;
            left: 0;
            top: 260px;
            width: 450px;
            height: 100px;
            background-color:rgba(255, 255, 255, 0.8);
        }
        .top .top-c .icon .title .text .text1{
            height: 33px;
            font-size: 24px;
            color: #4b5751;
            text-align: center;
            font-weight: bold;
            letter-spacing: -0.58px;
            margin: 23px 0 1px;
        }
        .top .top-c .icon .title .text .text2{
            text-align: center;
            font-size: 14px;
            color: #777777;
            letter-spacing: -0.34px;
        }
        /* ///////// */
        .jion{
            width: 100%;
            height: 300px;
            background-color: #fbf1ec;
        }
        .jion .jion-c{
            height: 100%;
            width: 1440px;
            margin: 0 auto;
            text-align: center;
            /* background-color: pink; */
        }
        .jion .jion-c .icon{
            height: 49px;
            font-size: 35px;
            letter-spacing: -0.48px;
            text-align: center;
            /* margin-top: -25px; */
            position: relative;
            top: -25px;
            font-weight: bold;
        }
        .jion .jion-c .title{
            width: 750px;
            height: 23px;
            border: none;
            outline: none;
            border-bottom: 1px solid #d5d5d5;
            background-color:  #FBF1EC;
            font-size: 14px;
            color: #9e9e9e;
            letter-spacing: -0.34px;
            margin-top: 18px;
            text-align: center;
            /* display: block; */
        }
        .jion .jion-c a{
            display: block;
            width: 120px;
            height: 40px;
            line-height: 40px;
            background-color: #161616;
            font-size: 14px;
            color: #ffffff;
            letter-spacing: -0.34px;
            margin: 39px auto 30px;
            text-align: center;
        }
        .jion .jion-c .text{
            font-size: 14px;
        }
    </style>
</head>
<body>
    <!-- 顶部 -->
    <div class="head">
        <div class="head-c">
            <a href="" class="logo">
                <img src="img/logo.png" alt="">
            </a>
            <ul class="nav">
                <li class="nav-icon">
                    <a href="">home</a>
                    <span class="line"></span>
                </li>
                <li class="nav-icon">
                    <a href="">flowers</a>
                    <span class="line"></span>
                </li>
                <li class="nav-icon">
                    <a href="">plants</a>
                    <span class="line"></span>
                </li>
                <li class="nav-icon">
                    <a href="">orders</a>
                    <span class="line"></span>
                </li>
                <li class="nav-icon">
                    <a href="">
                        <img src="img/sousuo.png" alt="">
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <div class="banner">
        <div class="dian">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
    <div class="body">
        <div class="body-c">
            <!-- 上面 -->
            <ul class="list">
                <li class="item">
                    <img src="img/banner2.png" alt="" class="bg">
                    <div class="info">
                        <div class="info1">If You Were A Cactus<br>In The Desert
                        </div>
                        <div class="info2">see all collection</div>
                    </div>
                </li>
                <li class="item">
                    <img src="img/banner2.png" alt="" class="bg">
                    <div class="info">
                        <div class="info1">If You Were A Cactus<br>In The Desert
                        </div>
                        <div class="info2">see all collection</div>
                    </div>
                </li>
                <li class="item mr0">
                    <img src="img/banner2.png" alt="" class="bg">
                    <div class="info">
                        <div class="info1">If You Were A Cactus<br>In The Desert
                        </div>
                        <div class="info2">see all collection</div>
                    </div>
                </li>
            </ul>
            <!-- 中间导航 -->
            <ul class="nav">
                <li class="nav-item">
                    <a href="">all</a>
                    <span class="line"></span>
                </li>
                <li class="nav-item">
                    <a href="">fresh</a>
                    <span class="line"></span>
                </li>
                <li class="nav-item">
                    <a href="">dried</a>
                    <span class="line"></span>
                </li>
                <li class="nav-item">
                    <a href="">potted</a>
                    <span class="line"></span>
                </li><li class="nav-item">
                    <a href="">decor</a>
                    <span class="line"></span>
                </li>
            </ul>
            <!-- 下面 -->
            <ul class="pro-list">
                <li class="pro-item">
                    <img src="img/tu4.png" alt="">
                    <div class="text">
                        <span class="title">Myrtle Cactus</span>
                        <span class="price">$20.45</span>
                    </div>
                    <div class="desc">
                        Potted
                    </div>
                </li>
                <li class="pro-item">
                    <img src="img/tu4.png" alt="">
                    <div class="text">
                        <span class="title">Myrtle Cactus</span>
                        <span class="price">$20.45</span>
                    </div>
                    <div class="desc">
                        Potted
                    </div>
                </li>
                <li class="pro-item">
                    <img src="img/tu4.png" alt="">
                    <div class="text">
                        <span class="title">Myrtle Cactus</span>
                        <span class="price">$20.45</span>
                    </div>
                    <div class="desc">
                        Potted
                    </div>
                </li>
                <li class="pro-item mr0">
                    <img src="img/tu4.png" alt="">
                    <div class="text">
                        <span class="title">Myrtle Cactus</span>
                        <span class="price">$20.45</span>
                    </div>
                    <div class="desc">
                        Potted
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="abt">
        <div class="abt-c">
            <div class="info">
                <div class="icon">About Us</div>
                <div class="title">
                    We publish announcement about us here, this shop so far has been about<br> 
                    what we likeand why we like it. In this brief final chapter, I turn to some implications of the essent. <br>
                    If you would like to know more about us I would <br>
                    be happy to have short call with you.
                </div>
                <div class="text">More</div>
            </div>
        </div>
    </div>
    <div class="top">
        <div class="top-c">
            <ul class="icon">
                <li class="title">
                    <img src="img/tu2.png" alt="">
                    <div class="text">
                        <div class="text1">Decoration</div>
                        <div class="text2">design your house</div>
                    </div>
                </li>
                <li class="title">
                    <img src="img/tu2.png" alt="">
                    <div class="text">
                        <div class="text1">Decoration</div>
                        <div class="text2">design your house</div>
                    </div>
                </li>
                <li class="title mr0">
                    <img src="img/tu2.png" alt="">
                    <div class="text">
                        <div class="text1">Decoration</div>
                        <div class="text2">design your house</div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="jion">
        <div class="jion-c">
            <div class="icon">Join Our Newsletter</div>
            <input class="title" type="text" value="youremails">
            <a href="">send</a>
            <div class="text">
                In effect, we are saying thar if you want to join us, then you have to become one 
                of us.We bless each of you and look forward to those of you choosing to join us ahead.
                Would you like to join us?
            </div>
        </div>
    </div>
</body>
</html>